import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:pornhub_app/assets/styles.dart';
import 'package:pornhub_app/components/base_refresh/base_refresh_widget.dart';
import 'package:pornhub_app/components/image_view.dart';
import 'package:pornhub_app/components/no_more/no_data.dart';
import 'package:pornhub_app/components/text_view.dart';
import 'package:pornhub_app/generate/app_image_path.dart';
import 'package:pornhub_app/model/blogger/blogger_fans_model.dart';
import 'package:pornhub_app/routes/routes.dart';
import 'package:pornhub_app/utils/color.dart';
import 'package:pornhub_app/utils/extension.dart';
import 'package:pornhub_app/views/blogger/controllers/blogger_detail_controller.dart';
import 'package:pornhub_app/views/blogger/controllers/blogger_fans_controller.dart';

/// 粉丝团
class ArroundFansClubPage extends StatefulWidget {
  const ArroundFansClubPage({super.key});

  @override
  State<ArroundFansClubPage> createState() => _ArroundFansClubPageState();
}

class _ArroundFansClubPageState extends State<ArroundFansClubPage> {
  int userId = 0;
  String name = "";
  String tag = DateTime.now().millisecondsSinceEpoch.toString();
  late BloggerFansController controller;
  late BloggerDetailController detailController;
  @override
  void initState() {
    userId = Get.arguments["userId"] ?? 0;
    controller = Get.put(BloggerFansController(userId), tag: tag);
    detailController =
        Get.find<BloggerDetailController>(tag: Get.arguments["tag"]);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<BloggerFansController>(
        tag: tag,
        assignId: true,
        builder: (_) {
          return Scaffold(
            backgroundColor: COLOR.black.withOpacity(0.5),
            appBar: AppBar(title: const TextView(text: "加入粉丝团")),
            body: Stack(
              children: [
                _buildBodyView(),
                Positioned(
                    left: 20.w,
                    right: 20.w,
                    bottom: 44.w,
                    child: Container(
                      width: 360.w,
                      height: 44.w,
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          gradient: LinearGradient(colors: [
                            COLOR.color_B93FFF,
                            COLOR.hexColor("#D47FFF")
                          ]),
                          borderRadius: BorderRadius.circular(44.w)),
                      child: Text(
                        "加入粉丝团",
                        style: kTextStyle(Colors.white,
                            fontsize: 20.w, weight: FontWeight.w600),
                      ),
                    ).onOpaqueTap(() async {
                      await showBottomSheet();
                      controller.onRefresh();
                    }))
              ],
            ),
          );
        });
  }

  _buildBodyView() {
    return BaseRefreshWidget(controller,
        child: CustomScrollView(
          slivers: [
            TextView(
              text: "欢迎各位观众加入，各类新鲜网红体育生视频等你来吃瓜，粉丝团年卡更有性价比哦，覆盖百分之99付费视频",
              style: kTextStyle(const Color.fromRGBO(255, 255, 255, 0.7),
                  fontsize: 12.w),
            ).marginOnly(left: 14.w, right: 14.w, top: 16.w).sliver,
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                TextView(
                  text: "粉丝团专属视频免费看",
                  style: kTextStyle(COLOR.color_B93FFF,
                      fontsize: 14.w, weight: FontWeight.w600),
                ),
                Row(
                  children: [
                    TextView(
                      text: "粉丝团介绍",
                      style: kTextStyle(COLOR.color_808080,
                          fontsize: 12.w, weight: FontWeight.w600),
                    ),
                    ImageView(
                      src: AppImagePath.arround_icon_fans_more,
                      width: 13.w,
                      height: 13.w,
                    ).paddingLeft(4.w)
                  ],
                ).onOpaqueTap(() {
                  Get.toNamed(Routes.arroundFansRule);
                })
              ],
            ).marginOnly(left: 14.w, right: 14.w, top: 18.w).sliver,
            if (controller.fansList.isEmpty && controller.isLoadedData == true)
              NoData().paddingTop(48.w).sliver,
            SliverPadding(
              padding: EdgeInsets.only(top: 16.w),
              sliver: SliverList.builder(
                  itemCount: controller.fansList.length,
                  itemBuilder: (context, index) {
                    BloggerFansModel item = controller.fansList[index];
                    return Container(
                      margin: EdgeInsets.only(bottom: 20.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Row(
                            children: [
                              if (index < 3)
                                ImageView(
                                  src: index == 0
                                      ? AppImagePath.arround_icon_level_1
                                      : index == 1
                                          ? AppImagePath.arround_icon_level_2
                                          : AppImagePath.arround_icon_level_3,
                                  width: 20.w,
                                  height: 28.w,
                                )
                              else
                                Container(
                                  width: 20.w,
                                  height: 28.w,
                                  alignment: Alignment.centerLeft,
                                  child: TextView(
                                    text: "${index + 1}.",
                                    style: kTextStyle(COLOR.color_8F8F8F,
                                        fontsize: 12.w),
                                  ),
                                ),
                              Row(
                                children: [
                                  ImageView(
                                    src: item.logo ?? "",
                                    width: 35.w,
                                    height: 35.w,
                                    borderRadius: BorderRadius.circular(35.w),
                                  ),
                                  TextView(
                                    text: "${item.nickName}",
                                    style:
                                        kTextStyle(COLOR.white, fontsize: 12.w),
                                  ).marginOnly(left: 4.w, right: 4.w),
                                  ImageView(
                                    src: item.ticketType == 1
                                        ? AppImagePath.arround_icon_ticket_1
                                        : item.ticketType == 2
                                            ? AppImagePath.arround_icon_ticket_2
                                            : AppImagePath
                                                .arround_icon_ticket_3,
                                    width: 20.w,
                                    height: 20.w,
                                    borderRadius: BorderRadius.circular(35.w),
                                  ),
                                ],
                              ).marginLeft(10.w)
                            ],
                          ),
                          TextView(
                            text: "${item.intimacy}点亲密度",
                            style: kTextStyle(COLOR.white, fontsize: 12.w),
                          )
                        ],
                      ),
                    );
                  }),
            )
          ],
        ));
  }

  Future<bool> showBottomSheet() async {
    int selectedIndex = 0;
    return await Get.bottomSheet(
      StatefulBuilder(builder: (context, setState) {
        return Container(
          width: 400.w,
          height: 323.w,
          decoration: BoxDecoration(
              color: COLOR.color_111,
              borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(14.w),
                  topRight: Radius.circular(14.w))),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Stack(
                children: [
                  Container(
                    width: 400.w,
                    padding: EdgeInsets.only(top: 20.w),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        ImageView(
                          src: AppImagePath.arround_icon_fans,
                          width: 42.w,
                          height: 37.w,
                        ).paddingRight(10.w),
                        TextView(
                            text: "加入粉丝团",
                            style: kTextStyle(COLOR.white,
                                fontsize: 16.w, weight: FontWeight.w600)),
                      ],
                    ),
                  ),
                  Positioned(
                    right: 20.w,
                    top: 20.w,
                    child: ImageView(
                      src: AppImagePath.mine_icon_dialog_close_white,
                      width: 16.w,
                      height: 16.w,
                    ).onTap(() {
                      Get.back();
                    }),
                  )
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: 108.w,
                    height: 129.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6.w),
                        border: selectedIndex == 0
                            ? Border.all(color: COLOR.hexColor("#C362F5"))
                            : null),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        TextView(
                          text: "粉丝团月票",
                          style: kTextStyle(COLOR.white,
                              fontsize: 12.w, weight: FontWeight.w400),
                        ),
                        ImageView(
                          src: AppImagePath.arround_icon_ticket_1_1,
                          width: 50.w,
                          height: 35.w,
                        ).marginOnly(top: 14.w, bottom: 11.w),
                        TextView(
                          text:
                              "${detailController.bloggerFansGroup.monthTicketPrice}金币",
                          style: kTextStyle(COLOR.color_B93FFF,
                              fontsize: 14.w, weight: FontWeight.w500),
                        ),
                      ],
                    ),
                  ).onOpaqueTap(() {
                    if (selectedIndex != 0) {
                      setState(() {
                        selectedIndex = 0;
                      });
                    }
                  }),
                  Container(
                    width: 108.w,
                    height: 129.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6.w),
                        border: selectedIndex == 1
                            ? Border.all(color: COLOR.hexColor("#C362F5"))
                            : null),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        TextView(
                          text: "粉丝团季票",
                          style: kTextStyle(COLOR.white,
                              fontsize: 12.w, weight: FontWeight.w400),
                        ),
                        ImageView(
                          src: AppImagePath.arround_icon_ticket_2_1,
                          width: 50.w,
                          height: 35.w,
                        ).marginOnly(top: 14.w, bottom: 11.w),
                        TextView(
                          text:
                              "${detailController.bloggerFansGroup.seasonTicketPrice}金币",
                          style: kTextStyle(COLOR.color_B93FFF,
                              fontsize: 14.w, weight: FontWeight.w500),
                        ),
                      ],
                    ),
                  ).onOpaqueTap(() {
                    if (selectedIndex != 1) {
                      setState(() {
                        selectedIndex = 1;
                      });
                    }
                  }),
                  Container(
                    width: 108.w,
                    height: 129.w,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(6.w),
                        border: selectedIndex == 2
                            ? Border.all(color: COLOR.hexColor("#C362F5"))
                            : null),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        TextView(
                          text: "粉丝团年票",
                          style: kTextStyle(COLOR.white,
                              fontsize: 12.w, weight: FontWeight.w400),
                        ),
                        ImageView(
                          src: AppImagePath.arround_icon_ticket_3_1,
                          width: 50.w,
                          height: 35.w,
                        ).marginOnly(top: 14.w, bottom: 11.w),
                        TextView(
                          text:
                              "${detailController.bloggerFansGroup.yearTicketPrice}金币",
                          style: kTextStyle(COLOR.color_B93FFF,
                              fontsize: 14.w, weight: FontWeight.w500),
                        ),
                      ],
                    ),
                  ).onOpaqueTap(() {
                    if (selectedIndex != 2) {
                      setState(() {
                        selectedIndex = 2;
                      });
                    }
                  })
                ],
              ).marginHorizontal(20.w),
              Container(
                width: 360.w,
                height: 44.w,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    gradient: LinearGradient(colors: [
                      COLOR.color_B93FFF,
                      COLOR.hexColor("#D47FFF")
                    ]),
                    borderRadius: BorderRadius.circular(44.w)),
                child: Text(
                  "确认购买",
                  style: kTextStyle(Colors.white,
                      fontsize: 20.w, weight: FontWeight.w600),
                ),
              ).marginBottom(40.w).onOpaqueTap(() async {
                bool r = await controller.join(
                    detailController.bloggerFansGroup.groupId!, selectedIndex);
                if (r) {
                  Get.back(result: r);
                }
              })
            ],
          ),
        );
      }),
      backgroundColor: COLOR.color_111,
    );
  }
}
